<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>添加账号</span>
        </div>
        <el-form ref="formRef" :rules="rules" status-icon :model="formData" class="form" size="small"
            label-width="80px">
            <el-form-item label="原密码" prop="account">
                <el-input v-model="formData.account">
                </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input type="password" v-model="formData.password" ref="psd">
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passowrdd">
                <el-input type="password" v-model="formData.passowrdd">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">添加</el-button>
                <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>


        </el-form>

    </el-card>
</template>

<script>
import { checkPsdReq,updataPsdReq } from '@/api/user'

//验证函数
const checkAccount = (rule, value, callback) => {
    //非空验证
    if (!value) {
        callback(new Error('账号不能为空'))

    } else if (!/^[a-zA-Z0-9]{4,16}$/.test(value)) {
        callback(new Error('数字,英文,中文4-16位'))
    } else {
        callback()
    }

}
// 密码验证函数
const checkPassword = (rule, value, callback) => {
    //非空验证
    if (!value) {
        callback(new Error('密码不能为空'))
        //正则验证
    } else if (!/^[a-zA-Z0-9]{4,16}$/.test(value)) {
        callback(new Error('数字,英文4-16位'))
    } else {
        callback()
    }

}
// 密码验证函数


export default {
    data() {
        const checkPassword2 = (rule, value, callback) => {

            //非空验证
            if (!value) {
                callback(new Error('确认密码不能为空'))
                console.log(this.formData);

                //正则验证
            } else if (value !== this.formData.password) {
                console.log(value);

                console.log(this.formData);
                callback(new Error('两次密码不一致'))
            } else {
                console.log(11);
                callback()
            }

        }
        return {
           
            formData: {
                account: '',
                password: '',
                passowrdd: '',
            },
            rules: {
                account: [{ validator: checkAccount, trigger: 'blur' }],
                password: [{ validator: checkPassword, trigger: 'blur' }],
                passowrdd: [{ validator: checkPassword2, trigger: 'blur' }],
            },
        }
    },
    methods: {
        submit() {
            this.$refs.formRef.validate(async valid => {
                console.log(valid);
                // 如果验证成功
                // 发送验证原密码是否正确接口
                // console.log(this.formData.account);
                let oldPwd=this.formData.account
                // console.log(oldPwd);
                let res=await checkPsdReq({oldPwd})
                let {code,msg}=res.data
                if(code===200){
                    let newPwd=this.formData.password
                    // 发修改密码请求
                    console.log(newPwd);
                   let res=await updataPsdReq({newPwd})
                   let {code,msg}=res.data
                   if(code===0){//成功
                    alert(msg)
                    this.$router.push('/login')

                   }else if(code===1){
                    alert(msg)
                   }
                   console.log(res.data);
                    
                  
                    
                }
                console.log(res.data);


            })

        },
        reset() {
            this.$refs.formRef.resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.modify {
    height: 100%;
    width: 100%;
    padding: 10px;
    background-color: #f0f2f5;

    .container {
        // height: 216px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 3px;
        box-shadow: 0px 0px 3px rgb(110, 110, 110);

        .titl {
            padding: 14px;
            border-bottom: 1px solid #eee;
        }
    }
}

.form {
    width: 288px;
}
</style>